<template>
  <div id="app">
    <el-card class="box-card">
      <div class="head_img"><img src="http://likede2-admin.itheima.net/img/logo.595745bd.png
" alt=""></div>
      <el-form class="forma" :rules="rules" ref="fff" :model="form">
        <el-form-item prop="username" >
          <el-input placeholder="请输入用户名:" v-model="form.username" prefix-icon="el-icon-mobile-phone"/>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            prefix-icon="el-icon-lock"
            :type="showPass ? 'password' : 'text'" autocomplete="off"
          >
          <!-- 如果属性时showPass是true就是password，否则就是text显示 -->
          <!-- 点击取反如果为true是锁的，如果false是开的 -->
           <template #suffix>
                  <div class="icon" @click="showPass = !showPass">
                    <i :class="showPass ? 'el-icon-lock' : 'el-icon-unlock'"></i>
                  </div>
                </template>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item  prop="code">
          <el-input
            placeholder="请输验证码"
            v-model="form.code"
            type="text"
            prefix-icon="el-icon-dish-1"
            class="yz"
          >
           <template #suffix>
                  <div class="code" @click="getImageCode">
                    <img :src="'https://likede2-java.itheima.net/api/user-service/user/imageCode/'+ MathFn" alt="">

                  </div>
                </template>
          </el-input>
        </el-form-item>
        <!-- 登录 -->
        <el-form-item class="tc">
          <el-button type="primary" @click="loginFn" class="btn">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getLogin } from '@/api/user'
import { setToken } from '@/utils/storage'
import { Message } from 'element-ui'

export default {
  data () {
    return {
      // 表单数据对象,1.和组件建立关系绑定，2.还要在和每个input双向绑定
      form: {
        username: 'admin',
        password: 'admin',
        code: ''
      },
      showPass: true, // 控制显眼睛
      // 验证码变化控制
      count: 1,
      // 设定规则，1.和组件建立关系，2.在每一个from-item上用prop接收校验名
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }], // 用户名
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }], // 密码
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }] // 验证码
      }
    }
  },
  created () {
  },
  computed: {
    // 创建随机数
    MathFn () {
      return Math.random() * this.count
    }
  },
  methods: {
    // 点击图片发生变化
    getImageCode () {
      this.count++
    },
    async loginFn () {
      const res = await getLogin({
        clientToken: this.MathFn,
        code: this.form.code,
        loginName: this.form.username,
        password: this.form.password,
        loginType: 0
      })
      console.log(res)
      // 存储本地token
      setToken(res.token)
      // 触发仓库里面的函数，把token传过去
      this.$store.commit('user/getToken', res)
      Message.success('登录成功')
      this.$router.push('/')
    }

  }
}
</script>

<style  lang="scss" scoped>
#app {
  position: absolute;
      height: 100%;
      width: 100%;
      background-image: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png);
      background-repeat: no-repeat;
      background-size: cover;
  .head_img{
    img{
    width: 96px;
    height: 96px;
    position: absolute;
    top: -50px;
    left: 45%;

    }
  }
  .box-card{
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
overflow:visible;
.btn{
     width: 100%;
    height: 60px;
    background: linear-gradient(262deg,#2e50e1,#6878f0);
    opacity: .91;
    border-radius: 8px;
    color: #fff;
    text-shadow: 0 7px 22px #cfcfcf;
  }
  ::v-deep .el-input__inner{
    height: 50px;
}
  }

}

</style>
